<template>
    <view :class="varClass" class="mdl-header-filter">
        <view class="search-header" :style="{
            marginTop: safeAreaInsets?.top + 'px',
        }">
            <image @click="goMyPage" v-if="userInfoStore.userInfo" class="face" :src="userInfoStore.userInfo.avatarUrl"
                mode="aspectFill" />
            <image v-else class="face" @click="goMyPage" src="https://scripture.oss-cn-shenzhen.aliyuncs.com/20250627/avatar_1751016957335.png" mode="aspectFill" />
            <navigator class="input" url="/pages/search/index" hover-class="none">
                <text class="icon-search">请输入搜索关键字…</text>
            </navigator>
            <text class="tip iconfont icon-mail"></text>
        </view>

        <!-- 顶部菜单 -->
        <view class="top_nav_filter">
            <view class="left">
                <mdl-tab tabClass="top_nav" :tabCur="curNavValue" :tab-list="navList" @change="tabOptionChange" />
            </view>
            <text class="iconfont icon-RectangleCopy38 btn"></text>
        </view>
    </view>
</template>

<script setup lang="ts">
// ask-buddha-hall
import MdlTab from '@/components/mdl-tab.vue'

// 复合式api的使用
import { useNavHook } from '@/composables/nav'
import { useUserInfoStore } from '@/stores'
const userInfoStore = useUserInfoStore()
const { navList, tabOptionChange } = useNavHook()

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 定义 emits
const emit = defineEmits(['update:tabCur', 'change'])

const props = withDefaults(
    defineProps<{
        varClass?: string;
        curNavValue: number;
    }>(),
    {
        varClass: 'default-class', // 默认值
        curNavValue: 0
    }
)

const goMyPage = () => {

    uni.switchTab({
        url: '/pages/my/my',
        success: () => {
        },
        fail: (err) => {
        },
    })
}

</script>

<style lang="scss">
@import '@/styles/style-variables.scss';

.mdl-header-filter {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding-top: 24rpx;

    .search-header {


        display: flex;
        align-items: center;
        padding: 0 $padding;
        background-color: #fff;

        width: 750rpx;
        height: 92rpx;
        background: #FFFFFF;

        .face {
            width: 76rpx;
            height: 76rpx;
            border-radius: 50%;
        }


        // #ifdef H5
        .navigator-wrap {
            flex: 1;
            display: flex;
        }

        // #endif


        .input {
            flex: 1;

            // #ifdef MP-WEIXIN
            flex: none;
            width: 312rpx;
            // #endif

            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 $padding;
            font-size: $font-mini-size;
            height: 62rpx;
            border-radius: 31rpx;
            color: $font-place-color;
            border: 1px solid $font-place-color;


            .icon-search {
                font-size: $font-size;
                font-weight: $font-regular-weight;
                color: $font-place-color;
                color: $font-h-color;
                display: flex;
                align-items: center;

                &::before {
                    margin-left: 10rpx;
                    margin-right: 8rpx;
                    content: '\e840';
                    font-family: 'iconfont' !important;
                    font-size: $font-medium-size;
                    color: $font-place-color;
                    color: $font-h-color;
                }
            }

        }

        .tip {
            color: $font-h-color;
            position: relative;
            font-size: 50rpx;
            margin-top: 10rpx;

            &::after {
                content: "";
                position: absolute;
                top: -3rpx;
                right: -3rpx;
                width: 15rpx;
                height: 15rpx;
                background: #FF3B30;
                border-radius: 100%;
            }
        }
    }

    .top_nav_filter {
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        background-color: $background-white-color;

        .btn {
            padding-left: 4rpx;
            transform: scaleX(-1);
        }

        .left {
            flex: 1;
            width: 400rpx;
        }

    }
}
</style>
